<template>
  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
    <n-drawer-content :title="title" closable>
      <n-form :model="formParams" :rules="rules" ref="formRef" label-placement="left" :label-width="100">
        <n-form-item label="菜单类型" path="menuType">
          <n-select v-model:value="formParams.menuType" filterable placeholder="请选择类型" :options="menuOptions" />
        </n-form-item>
        <n-form-item label="菜单名称" path="name">
          <n-input maxlength="200" show-count placeholder="请输入菜单名称" v-model:value="formParams.name" />
        </n-form-item>
        <n-form-item label="菜单路径" path="path">
          <n-input maxlength="200" show-count placeholder="请输入路径" v-model:value="formParams.path" />
        </n-form-item>
        <n-form-item label="打开方式" path="openType">
          <n-radio-group v-model:value="formParams.openType" name="radiogroup">
            <n-space>
              <n-radio :value="1">当前窗口</n-radio>
              <n-radio :value="2">新窗口</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="菜单权限" path="auth">
          <n-input maxlength="100" show-count placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth" />
        </n-form-item>
        <n-form-item label="是否隐藏" path="hidden">
          <n-select v-model:value="formParams.hidden" filterable placeholder="请选择是否隐藏" :options="hiddenOptions" />
        </n-form-item>
        <n-form-item label="获取方式" path="method">
          <n-select v-model:value="formParams.method" filterable placeholder="请选择获取方式" :options="methodOptions" />
        </n-form-item>
        <n-form-item label="所属服务" path="serviceId">
          <n-select v-model:value="formParams.serviceId" filterable placeholder="请选择所属服务" :options="serviceOptions" />
        </n-form-item>
        <n-form-item label="菜单排序" path="orderNum">
          <n-input-number style="width: 100%;" placeholder="请输入排序" v-model:value="formParams.orderNum" />
        </n-form-item>
        <n-form-item label="菜单描述" path="description">
          <n-input maxlength="300" show-count type="textarea" :autosize="{
            minRows: 3,
            maxRows: 5
          }" v-model:value="formParams.description" filterable placeholder="请输入描述" />
        </n-form-item>
      </n-form>

      <template #footer>
        <n-space>
          <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
          <n-button @click="handleReset">重置</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { useMessage } from 'naive-ui';
import { addMenu } from '@/api/system/menu';
import { ResultEnum } from '@/enums/httpEnum';
import { hiddenOptions, menuOptions } from '@/utils/convert';
const rules = {
  name: {
    required: true,
    message: '请输入菜单名称',
    trigger: 'blur',
  },
  path: [
    {
      required: true,
      message: '请输入路径',
      trigger: 'blur',
    },
    { pattern: /^[^\u4e00-\u9fa5]+$/, trigger: ['blur', 'input'], message: '不能输入中文' },
  ],
  menuType: {
    required: true,
    message: '请选择菜单类型',
    trigger: ['blur', 'change'],
  },
  auth: [
    {
      required: true,
      message: '请输入权限标识',
      trigger: 'blur',
    },
    { pattern: /^[^\u4e00-\u9fa5]+$/, trigger: ['blur', 'input'], message: '不能输入中文' },
  ],
  method: {
    required: true,
    message: '请选择获取方式',
    trigger: ['blur', 'change'],
  },
  serviceId: {
    required: true,
    message: '请选择所属服务',
    trigger: ['blur', 'change'],
  },
  orderNum: {
    type: 'number',
    required: true,
    message: '请输入排序',
    trigger: ['blur', 'change'],
  },
};
export default defineComponent({
  name: 'CreateDrawer',
  components: {},
  props: {
    title: {
      type: String,
      default: '添加顶级菜单',
    },
    width: {
      type: Number,
      default: 450,
    },
    parentId: {
      type: Number,
      default: 0,
    },
    methodOptions: {
      default: []
    },
    serviceOptions: {
      default: []
    },
    reloadMenuTree: {
      type: Function,
      required:true
    }
  },
  setup(props) {
    const message = useMessage();
    const formRef: any = ref(null);
    const defaultValueRef = () => ({
      auth: '',
      description: '',
      hidden: null,
      menuType: '',
      method: '',
      name: '',
      openType: 1,
      orderNum: 1,
      parentId: 0,
      path: '',
      serviceId: ''
    });

    const state = reactive({
      isDrawer: false,
      subLoading: false,
      formParams: defaultValueRef(),
      placement: 'right' as const,
    });

    function openDrawer() {
      state.isDrawer = true;
    }

    function closeDrawer() {
      state.isDrawer = false;
    }

    function formSubmit(e: MouseEvent) {
      e.preventDefault()
      state.subLoading = true;
      formRef.value.validate(async (errors) => {
        if (!errors) {
          state.formParams.parentId = props.parentId;
          const data = await addMenu(state.formParams);
          if (data.code !== ResultEnum.SUCCESS) {
            const resultMsg = data.data ? data.data : '';
            message.error(data.mesg + '-' + resultMsg);
          }
          if (data.code === ResultEnum.SUCCESS) {
            message.success(data.mesg);
            state.formParams = Object.assign(state.formParams, defaultValueRef());
            closeDrawer();
            props.reloadMenuTree();
          }
          state.subLoading = false;
        } else {
          message.error('请填写完整信息');
        }
        state.subLoading = false;
      });
    }

    function handleReset() {
      formRef.value.restoreValidation();
      state.formParams = Object.assign(state.formParams, defaultValueRef());
    }

    return {
      ...toRefs(state),
      formRef,
      rules,
      menuOptions,
      hiddenOptions,
      formSubmit,
      handleReset,
      openDrawer,
      closeDrawer,
    };
  },
});
</script>
